<template>
    <NavBar></NavBar>
    <ContentField>
        <h2 style="text-align:center;margin-bottom: 20px;">班级题集信息</h2>

        <table class="table  table-primary  table-striped table-hover" style="margin-bottom: 10px;">
            <thead class="table-dark text-center" >
                <tr>
                <th>序号</th>
                <th scope="col">id</th>
                <th scope="col">题集id(setId)</th>
                <th scope="col">班级id(classId)</th>
                <th scope="col">发布时间(createDate)</th>
                <th></th>
                </tr>
            </thead>
            <tbody class="text-center">
                <tr v-for="(item, index) in pubs" :key="item.id">
                    <th>{{ index + 1 }}</th>
                    <td>{{ item.id }}</td>
                    <td>{{ item.setId }}</td>
                    <td>{{ item.classId }}</td>
                    <td>{{ formatDate(item.publishDate,"yyyy-MM-dd ") }}</td>
                    <td>
                        <button class="btn btn-sm btn-primary" style="margin-right:5px;" @click="toSetProfile(item.setId)">进入题集</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <span aria-label="Page navigation example">
            <ul class="pagination" style="float:left">
                <li class="page-item disabled">
                    <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
                </li>
            </ul>
            <ul class="pagination" style="float:right">
                <li class='page-item'>
                    <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                    <a v-else class="page-link" @click="getPage( classId, prePage, pageSize )">上一页</a>
                </li>

                <li class="page-item" v-for="(item, index) in totalPage" :key="index">
                    <a  class="page-link" @click="getPage(classId, item,pageSize)">{{ item }}</a>
                </li>
                <li class= 'page-item'>
                    <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                    <a  v-else class="page-link" @click="getPage(classId, nextPage,pageSize )">下一页</a>  
                </li>
            </ul>
        </span>

    </ContentField>
</template>

<script>

    import NavBar from '@/components/student/NavBar/NavBar.vue'
    import ContentField from '@/components/commons/ContentField.vue';
    import formatDate from '@/utils/DateFormatter';
    import {useStore} from 'vuex';
    import {useRoute} from 'vue-router';
    import {ref} from 'vue';
    import $ from 'jquery';
    import router from '@/router/index';

    export default {
        name: 'classSet',
        components:{
            NavBar,
            ContentField,
        },
        computed: {
        formatDate(){
              return formatDate;
           },
        },

        setup(){

            const store = useStore();
            const route = useRoute();
            let classId = route.params.classId;
            let pubs = ref([]);


            let PageNum = 1 ;  //当前页数
            let PageSize = 6 ; //每页数据条数
            let pageNum = ref('');  //当前页数  变量  用于前端渲染
            let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
            let totalNum = ref('');  //总条数
            let totalPage = ref(''); //总页数
            let isFirstPage = ref('');  //是否为第一页
            let isLastPage = ref('');  //是否为最后一页
            let nextPage = ref("");  //下一页
            let prePage = ref("");   //前一页
        
            pageSize.value = 1;
            pageNum.value = 5;
            totalPage.value = 3;
            isFirstPage.value = true;
            isLastPage.value = false;
            nextPage.value = 2;
            prePage.value = 1;

            const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
                PageNum = pageNum.value;
                PageSize = pageSize.value;
            }

            
        const getPage = (CId, PageNum, PageSize)=> {

            $.ajax({  //通过CId获取所有题集
                url: 'http://localhost:8090/sls/publish/getPageInfoByCId/' +CId + '/' + PageNum +'/' + PageSize ,
                type: 'get',
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                    
                    //console.log(resp);

                    pubs.value = resp.list;  //获取所有题集信息

                    totalNum.value = resp.total;
                    totalPage.value = resp.pages;
                    pageNum.value = resp.pageNum;
                    pageSize.value = resp.pageSize;
                    isFirstPage.value = resp.isFirstPage;
                    isLastPage.value = resp.isLastPage;
                    nextPage.value = resp.nextPage;
                    prePage.value = resp.prePage;

                    updatePageInfo(pageNum, pageSize);

                },
                error(resp){
                    console.log(resp);
                }
            });
            }

            getPage(classId, PageNum, PageSize);


            const toSetProfile = (setId) => {
                router.push({name:'S_setProfile', params: {setId: setId}});
            }


            return{

                updatePageInfo,
                toSetProfile,

                classId,
                pubs,

                PageNum,
                PageSize,
                pageNum,
                pageSize,
                totalNum,
                totalPage,
                isFirstPage,
                isLastPage,
                nextPage,
                prePage,

            }

        }

    }


</script>


<style scoped>
</style>